<template>
    <ul class="list">
        <li
            class="item"
            v-for="(item,key) of cities"
            :key="key"
            @click="handleLetterClick"
        >
            {{key}}
        </li>
    </ul>
</template>

<script>
export default {
  name: 'CityAlphabet',
  props: {
    cities: Object
  },
  methods: {
    handleLetterClick (e) {
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibies.styl';
    .list
        display :flex
        flex-direction :column
        justify-content :center
        position: absolute
        top: 1.58rem
        right: 0
        bottom: 0
        .item
            text-align :center
            color:$bgColor
            line-height :.4rem
</style>
